<template>
  <div>
    <FixedOperation>
      <div class="flex items-center justify-between">
        <div class="leading-30px">
          <div class="inline-block">
            <svg-icon
              :icon-class="'svg_salesorder'"
              class="w-30px h-30px align-middle"
            />
            <span
              class="text-#000 leading-30px ml-10px text-16px font-bold align-bottom"
              >权益内容维护</span
            >
          </div>
        </div>

        <div>
          <el-select
            class="w-full"
            v-model="queryParams.vipType"
            placeholder="会员类型"
            @change="init"
          >
            <el-option
              v-for="item in vip_group_tpye"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="text-right">
          <slot></slot>
          <el-button
            type="primary"
            plain
            @click="goTo('/source/rights/contentTable')"
            >权益维护</el-button
          >
          <el-button type="primary" plain @click="addMember"
            >新增会员</el-button
          >
          <!-- <el-button type="primary" plain @click="handleReturn">返回</el-button> -->
        </div>
      </div>
    </FixedOperation>
    <div class="app-container inden-manage">
      <el-table v-loading="loading" :data="tableList" stripe height="74vh">
        <el-table-column prop="name" label="" width="250" fixed="left">
          <template #default="scope">
            <div :class="scope.row.parentId ? 'p-l-6' : 'font-black'">
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(column, index) in tableField"
          :key="index"
          :label="column.name"
          :prop="column.keyValue"
          align="center"
          min-width="150"
          v-bind="column.options"
        >
          <template #header="{ $index }">
            <div class="flex items-center justify-center">
              <span>{{ tableField[$index - 1].name }}</span>
              <el-dropdown>
                <div>
                  <el-icon class="el-icon--right"><arrow-down /></el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      icon="Edit"
                      @click="handleEditHead(tableField[$index - 1])"
                      >编辑</el-dropdown-item
                    >
                    <el-dropdown-item
                      icon="Delete"
                      @click="handleDelHead(tableField[$index - 1])"
                    >
                      删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
          <template #default="scope">
            <div>
              <div v-if="!scope.row.$cellEdit">
                <span v-if="scope.row.addMethod == '2'">
                  {{ scope.row[column.keyValue] }}</span
                >
                <span v-else-if="scope.row.addMethod == '1'">
                  <el-icon
                    v-if="scope.row[column.keyValue] == 'true'"
                    class="text-orange-400"
                    ><Select
                  /></el-icon>
                  <el-icon v-else><CloseBold /></el-icon>
                </span>
              </div>
              <div v-else>
                <el-input
                  v-if="scope.row.addMethod == '2'"
                  v-model="scope.row[column.keyValue]"
                  :placeholder="`${tableField[index]?.name}`"
                />
                <el-switch
                  v-else-if="scope.row.addMethod == '1'"
                  v-model="scope.row[column.keyValue]"
                  active-icon="Check"
                  inactive-icon="Close"
                  active-value="true"
                  inactive-value="false"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="250" align="center">
          <template #default="scope">
            <div>
              <div v-if="!scope.row.$cellEdit">
                <span> {{ scope.row.remark }}</span>
              </div>
              <div v-else>
                <el-input
                  type="textarea"
                  maxlength="100"
                  rows="2"
                  v-model="scope.row.remark"
                  :placeholder="`备注`"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="180"
          fixed="right"
          class-name="small-padding"
        >
          <template #default="scope">
            <el-button
              plain
              size="small"
              icon="Edit"
              @click="
                () => {
                  scope.row.$cellEdit = !scope.row.$cellEdit
                }
              "
              >{{ scope.row.$cellEdit ? '返回' : '编辑' }}</el-button
            >
            <el-button
              plain
              size="small"
              v-show="scope.row.$cellEdit"
              icon="Edit"
              @click="submitRow(scope.row)"
              >保存</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增会员 -->
    <el-dialog
      :title="memberBox.title"
      v-model="memberBox.open"
      :width="memberBox.width"
      append-to-body
      @close="cancel"
    >
      <el-form
        ref="memberRef"
        :model="memberForm"
        :rules="memberRules"
        label-width="140px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="会员类型名称" prop="name">
              <el-input
                v-model="memberForm.name"
                placeholder="请输入会员类型名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否推荐" prop="recommend">
              <el-radio-group v-model="memberForm.recommend">
                <el-radio
                  v-for="item in yes_or_no"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="价格" prop="price">
              <el-input v-model="memberForm.price" placeholder="请填写价格"
                ><template v-slot:append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="周期" prop="unit">
              <el-select
                class="w-full"
                v-model="memberForm.unit"
                placeholder="请选择周期"
              >
                <el-option
                  v-for="item in examine_frequency"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="会员类型" prop="vipType">
              <el-select
                class="w-full"
                v-model="memberForm.vipType"
                placeholder="会员类型"
              >
                <el-option
                  v-for="item in vip_group_tpye"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序" prop="sort">
              <el-input-number
                :step="1"
                step-strictly
                v-model="memberForm.sort"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="memberForm.remark"
                type="textarea"
                rows="4"
                maxlength="100"
                show-word-limit
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="RightsManage">
import { reactive, toRefs, ref, toRaw } from 'vue'
import { useRouter } from 'vue-router'
import {
  listEquityTable,
  setMember,
  listMember,
  delMember,
  setEquityTable
} from '@/api/rightsManage/index'
import { isMoneyNot } from '@/utils/validate'
const router = useRouter()
const { proxy } = getCurrentInstance()

const userOption = ref({ transactionId: [] })
const { examine_frequency, yes_or_no, vip_group_tpye } = proxy.useDict(
  'examine_frequency',
  'yes_or_no',
  'vip_group_tpye'
)
const data = reactive({
  queryParams: { vipType: '1' },
  loading: false,
  tableField: [
    { keyValue: 'name0', name: '标准版云财税会员' },
    { keyValue: 'name1', name: '标准版云财税会员1' },
    { keyValue: 'name2', name: '标准版云财税会员2' }
  ],
  tableList: [],
  memberBox: {
    title: '新增会员',
    open: false
  },
  memberRules: {
    name: [
      {
        required: true,
        message: '请输入会员名称',
        trigger: 'blur'
      }
    ],
    price: [
      {
        required: true,
        message: '请输入订单金额',
        trigger: 'blur'
      },
      {
        validator: isMoneyNot
      }
    ],
    recommend: [
      {
        required: true,
        message: '请选择是否推荐',
        trigger: 'change'
      }
    ],
    vipType: [
      {
        required: true,
        message: '请选择会员类型',
        trigger: 'change'
      }
    ]
  },
  memberForm: {
    unit: '2',
    recommend: '0'
  }
})
const {
  queryParams,
  loading,
  tableField,
  tableList,
  memberBox,
  memberRules,
  memberForm
} = toRefs(data)

// 初始化
async function init() {
  // 归属部门
  getTable()
  getList()
}

// 获取会员列表
function getTable() {
  listMember(queryParams.value).then(res => {
    tableField.value = res.data
    // console.log('会员列表res===>', res)
  })
}

// 获取数据列表
function getList() {
  listEquityTable(queryParams.value).then(res => {
    tableList.value = res.data.map(item => {
      return {
        ...item,
        $cellEdit: false
        // options: { minWidth: '5000px' }
      }
    })
    // console.log('数据列表res===>', res)
  })
}

function goTo(url, data) {
  router.push({ path: url, query: data })
}
function handleAdd() {
  goTo('/source/rights/contentTable', {})
}
function submitForm() {
  proxy.$refs.memberRef.validate((valid, msg) => {
    if (valid) {
      setMember(memberForm.value).then(res => {
        console.log('新增会员==》', res)
        proxy.$modal.msgSuccess('保存成功')
        cancel()
        getTable()
      })
    }
  })
}
/** 表单重置 */
function reset() {
  memberForm.value = {
    unit: '2',
    recommend: '0'
  }
  proxy.resetForm('memberRef')
}
function cancel() {
  reset()
  memberBox.value.open = false
}
function addMember() {
  memberBox.value.title = '新增会员'
  memberBox.value.open = true
}
// 编辑会员
function handleEditHead(column) {
  memberBox.value.title = '编辑会员'
  memberBox.value.open = true
  memberForm.value = JSON.parse(JSON.stringify(column))
  // console.log('column==>', column)
}
// 删除会员
function handleDelHead(column) {
  let rowIds = column.id
  proxy.$modal
    .confirm('是否确认删除名称为"' + column.name + '"会员?')
    .then(function () {
      return delMember(rowIds)
    })
    .then(() => {
      init()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
}
function submitRow(row) {
  setEquityTable(row).then(res => {
    console.log('保存行==》', res)
    proxy.$modal.msgSuccess('保存成功')
    getList()
  })
}
init()
</script>
<style scoped>
.search-drawer-retract {
  color: #999999;
}
</style>
